<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <mescroll-uni
				v-if="loadOk"
               ref="mescrollRef"
               @init="mescrollInit"
               :height="height"
               :down="downOption"
               @down="downRefresh"
               :up="upOption"
               @up="getData">
                <view  class="pro-list-item" v-for="(item, index) in datas" :index="index" :key="index">
                    <view class="pro-main">
                        <view class="pro-name">
                            <text class="pro-name-text">{{item.PName}}</text
                            >
                        </view>
                        <view class="pro-num">
                            <text class="pro-num-text">货号：{{ item.PCode }}</text>
                        </view>
                        <view class="pro-num" v-if="item.PSku">
                            <text class="pro-num-text">规格：{{ item.PSku }}</text>
                        </view>
                        <view class="pro-price">
                            <view class="pro-price-left">
                                <text>￥{{ item.Price }}</text>
                                <text>x {{ item.Qty }}</text>
                                <text>{{ item.Unit }}</text>
                            </view>
                            <view class="pro-price-right">
                                <text>小计：</text>
                                <text class="total-price">￥{{item.Total}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>

        <view class="bottom-bar">
            <text>合计：</text>
            <text class="price">￥</text>
            <text class="price">{{ getTotalPrice()}}</text>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetArApDetail } from "@/service/api/erp.js"
export default {
    components: {
        easyProImage,
    },
	computed: {
	    ...mapState("report", ["startDate", "endDate"]),
	},
    data() {
        return {
            downOption: {
                use: false,
            },
            config: {
                title: "销售单明细",
                centerSlot: true,
            },
            height: "",
            loadOk: false,
            totalPrice: 0,
			type:2,
			code:'',
			datas:[],
			param: {
			    type: this.type,
			    pageNumber: 0,
			    pageSize: 0,
			},
        }
    },
    onLoad(e) {
        this.code = e.code
    },
    mounted() {
        this.getListHeight()
    },
    onShow() {},
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.height = e - 68 + "px"
                this.loadOk = true
				this.$nextTick(() => {
				    this.refresh()
				})
            })
        },
        //获取列表数据
		getData(page) {
			let param = {
				fullname:this.code
			}
		    GetArApDetail(param).then((res) => {
				this.mescroll.endBySize(res.OrderList.length,1)
				this.datas = this.datas.concat(res.OrderList)
				console.log(res)
				this.loadOk = true
		    })
		},
		getTotalPrice(){
			let num = 0
			this.datas.forEach((item) =>{
				num = num + item.Total;
			})
			return num.toFixed(2)
		},
        //刷新
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
		goCommodity(item){
			this.easyGoTo("/pages_erp/new-sale/commodity-detail?id="+item.PCode)
		},
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}
.main {
    padding: $app-page-padding;
}
.pro-list-item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: $app-page-padding;
    border-radius: 16rpx;
    .pro-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        text {
            color: $app-color-text-tip;
        }
        .pro-name {
            .pro-name-text {
                font-size: $font-size-30;
                font-weight: 700;
                color: $app-color-text-main;
            }
            .gift {
                color: $app-color-main;
            }
        }
        .pro-price {
            display: flex;
            flex-direction: row;
            align-items: center;
            .pro-price-left {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex: 1;
                text {
                    margin-right: 8rpx;
                }
            }
            .pro-price-right {
                display: flex;
                flex-direction: row;
                align-items: center;
                text {
                    font-size: 28rpx;
                }
            }
        }
        .total-price {
            color: $app-color-text-main;
        }
    }
}
.bottom-bar {
    text {
        font-size: 28rpx;
        font-weight: bold;
    }
    .price {
        color: $app-color-main;
    }
}
</style>
